草庐IT

前端 PM

全部标签

前端预览文件总结(表格、图片、文本、视频)

文件在线预览最近有个需求要在浏览器上能够查看文件。就是拿到文件的链接,实现文件在线预览的功能,在经过不断地查资料,试错后终于完成了下列文件格式的在线预览功能,暂时没有做大文件的处理(不知道咋做)。图片类(jpg|jpeg|png|gif)文本类(txt|svg|log|sh|out|dat|mat|pdb|msg|pdbq|prt|sta|skf|shear|hhr|a3m|pbs|com|info)视频类(mp4|avi|mkv|mov|webm|wmv)表格类(xsl|xslx|xls|xlsx|csv)。。。图片类、视频类这两种是最简单的,直接使用标签就可以。图片类使用img,视频类使用

前端通过http获取图片流并转存

一.场景    昨天公司里面提了一个需求,将竞争对手的sku通过一些手段导入我们自己的数据库,普通数据比较好搞,但是图片这种静态资源我们只能获取到一个url,所以需要进行一次转存。二.实现    这里有两个思路,一个是交给后端来做这个事情,但是后端做的话,会暴露我们自己的后端,给对手留下痕迹。第二个就是前端来做,每次使用不同的电脑访问网站来做这个数据转存的操作就给追踪提高难度,因为对方也不知道我们是否是正常的访问资源。    最终选择了前端来做。第一步,通过http获取到该网站的数据,模拟登录获取token,截取下来他的商品列表数据。这个就不贴代码了,也可以通过不使用代码的方式来实现。    

【区块链 | 前端】前端开发人员入门区块链的最佳实践

前端开发人员入门区块链的最佳实践一.建立信仰从技术入门一个行业通常是漫无目的,个人认为正确的入行区块链的方式是去了解他的背景,是去建立自己信仰的,尤其身处一个刚起步就被扼杀的行业,我们每个人都是领头人,我们需要坚信这个行业是有未来的,当然我们不能去神话他,认为他无所不能,也不能去恶意揣测,否则你也没有必要进入这个行业,很多未接触区块链但是略有耳闻的人常常会有这样一个认知:区块链本身是没有价值的,整个区块链行业就是一个庞氏骗局。不知道你是否也有这样思考,我常常与朋友交谈时,发现他们基本都是如此,。这里推荐两本我个人认为还可以的书籍,希望可以帮助你逃离这个误区1.《区块链:从数字货币到信用社会》2

已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错problem已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错控制台仍然出现cors禁止报错,接口调不通reason配置proxy代理解决跨域问题的原理是:前端工程本地环境会启动一个express或koa的web服务例如http://localhost:3000后端接口可能是ip有可能是dev的域名例如http://dev.com/api前端页面通过axios调用后端接口,如果直接从浏览器发起请求,相当于浏览器(3000端口)向http://dev.com/api发起

前端支持大数据量虚拟滚动表格的ui组件库(vue、react)

虚拟滚动的本质并不复杂,根据滚动位置和展示范围进行部分数据截取、渲染,本质上和分页原理相似,只是截取范围的开始和结束节点是动态而已。但表格虚拟滚动的相关细节处理比较麻烦,比如未设置宽度的列如何计算、新渲染的checkbox确定选中状态等等。所以,推荐几个可以支撑前端展示10W+数据量的表格组件,减少重复造轮子。废话少说,上干货。React:AntDesign官网地址:此组件库早已是react开发者必备的组件库,无须赘述,内部表格自带虚拟滚动。TDesign官网地址:腾讯出品的前端组件库,此前个人使用不多,但内部的表格组件同样包含虚拟滚动功能。Material-UI官网地址:来源于国外的一款开源

【vue+sm2】前端使用国密sm2,加解密

1.第一步就是安装依赖npminstall--savesm-crypto2.导入sm2constsm2=require('sm-crypto').sm23.先定义私钥或者公钥,私钥是解密,公钥是加密varprivateKey="私钥";//解密使用varpublicKey="公钥";//加密使用4.设置加密模式//cipherMode[加密模式C1C3C2:1,C1C2C3:0]constcipherMode=1;//默认是15.解密的使用全码页面代码直接@click绑定getphone即可单击实现data(){return{copyphone:'',}}methods:{getphone()

开发中的花样玩法(前端打工人须知)

一、关于vue使用vant的van-popup,子元素设定固定定位失效问题。position:fixed;原因是该组件使用了transform导致,父元素使用了transform会导致子元素在使用固定定位时失效,解决方法就是把要设置固定定位的子元素放在跟组件平级的位置,变成兄弟元素。这样就能解决二、当浏览器因为有缓存导致页面新增内容不生效的问题解决方法直接Ctrl+F5强制刷新——不走缓存三、代码的另类写法默认按钮默认按钮 四、解决git项目中文件夹首字母改成大写后在远程出现两个文件夹的问题最好的解决方法,直接把原文件复制一份,原文件删了,复制的文件重命名一个新名字——跟原文件名字不一样然后更

Websocket 推送音频文件流,前端播放及下载

DOCTYPEhtml>html>head>metacharset="UTF-8">title>Websocket推送音频文件流,前端播放及下载title>scriptsrc="PCMPlayer.js">script>scriptsrc="base64.min.js">script>scriptsrc="pcmtoWav.js">script>head>body>buttononclick="sendMessage()">开始button>buttononclick="down()">下载button>script>varws=nullvarfiles=[]//创建实例varplayer=n

前端:下载文件(多种方法)

一、简介前端经常会有下载文件的需求,这里总结了几种常用的方法,方便日后查看。二、a标签下载下载三、window.open下载downloadTemple(){window.open(`url`);},四、location.hreflocation.href='https://a.png';五、saveAssaveAs('https://abc.png')六、loadFileSimply6.1、loadFileSimply//loadFileOps.jsimportaxiosOpsfrom'axios';importcookiefrom'js-cookie';import{hasIn}from'

前端如何安全的渲染HTML字符串?

在现代的Web应用中,动态生成和渲染HTML字符串是很常见的需求。然而,不正确地渲染HTML字符串可能会导致安全漏洞,例如跨站脚本攻击(XSS)。为了确保应用的安全性,我们需要采取一些措施来在安全的环境下渲染HTML字符串。本文将介绍一些安全渲染HTML字符串的最佳实践,以帮助你有效地避免潜在的安全风险。一、常见渲染方式首先来看一下如何在HTML、React、Vue、Angular中渲染HTML字符串。HTML在HTML中渲染HTML字符串,可以使用原生JavaScript的innerHTML属性或者创建元素节点并使用appendChild()方法来实现。使用innerHTML属性:可以通过获